<template>
  <div>
    <el-table :data="tableData" v-show="showIndex == 0">
      <el-table-column width="50" label="序号" prop="no"></el-table-column>
      <el-table-column width="120" label="店铺头像" prop="storeIcon">
        <template slot-scope="scope">
          <el-image
            style="width: 80px; height: 80px; border: 1px solid #cccccc"
            :src="scope.row.storeIcon"
            fit="contain"
            align="center"
          ></el-image>
        </template>
      </el-table-column>

      <el-table-column width="180" label="店铺名" prop="storeName"></el-table-column>
      <el-table-column width="400" label="店铺描述" prop="storeDesc"></el-table-column>

      <el-table-column>
        <template slot-scope="scope">
          <el-button type="primary" @click="visitDetail(scope.row)" v-if="scope.row.valid == 1">查看详情</el-button>
          <el-button type="danger" @click="deleteCollect(scope.row.collectId)" plain>取消收藏</el-button>
        </template>
      </el-table-column>
    </el-table>
    <CollectDetail ref="collectDetail" v-show="showIndex == 1" @back="showIndex = 0" />
  </div>
</template>

<script>
import CollectDetail from "@/components/UserCenter/CollectDetail";

export default {
  name: "Collect",
  data() {
    return {
      showIndex: 0,
      tableData: [],
    };
  },
  components: {
    CollectDetail,
  },
  methods: {
    initCollect() {
      var url = process.env.URL_HEAD + "/touser/user/page/init/collect";

      this.$http
        .get(url, {
          withCredentials: true,
        })
        .then(
          (response) => {
            if (response.data.store != null) {
              var store = response.data.store;

              for (var i = 0; i < store.length; i++) {
                if (store[i].storeId == null) {
                  store[i] = {
                    collectId: store[i].collectId,
                    valid: 0,
                    no: i + 1,
                    storeName: '"店铺不存在"',
                    storeIcon: null,
                  };
                } else {
                  store[i].valid = 1;
                  store[i].no = i + 1;
                }
              }

              this.tableData = store;

              console.log(store);

              console.log("initCollect ok");
            } else {
              console.log("no login");
            }
          },
          (response) => {
            console.log("initCollect fail");
          }
        );
    },
    visitDetail(store) {
      //   console.log(store);
      this.$refs.collectDetail.init(store);

      this.showIndex = 1;
    },
    deleteCollect(collectId) {
      var url = process.env.URL_HEAD + "/touser/user/collect/delete";

      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.post(url, [collectId]).then(
            (response) => {
              if (response.data.msg == "success")
                this.$message.success("删除成功！");
              else this.$message.error("删除失败");

              this.initCollect();
            },
            (response) => {
              this.$message.error("系统异常，请重试");
            }
          );
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
  },
  created() {
    this.initCollect();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
